<template>
	<view class="contain">
		<!--<view class="title">设置</view>-->
		<view class="title">{{lang.set.setting}}</view>
		<view class="list">
			<view class="set-list">
				<view class="set-item">
					<!--<view>波特率</view>-->
					<view>{{lang.set.band}}</view>
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="baud_rate">
						<view class="set-right">
							<view>{{val}}</view>
							<image src="../../static/images/down.png"></image>
						</view>
					</picker>
				</view>
				<view class="set-item">
					<!--<view>数据显示</view>-->
					<view>{{lang.set.data}}</view>
					<u-switch v-model="checked" :size="size" @change="toggle" active-color="#39e55c"
						inactive-color="#eee"></u-switch>
				</view>
				<view class="set-item">
					<!--<view>状态显示</view>-->
					<view>{{lang.set.state}}</view>
					<u-switch v-model="checked1" :size="size" @change="toggle1" active-color="#39e55c"
						inactive-color="#eee"></u-switch>
				</view>
			</view>
			<view class="set-list" style="margin: 30rpx 0;">
				<u-radio-group :max="10000" v-model="color3">
					<view  @click="toggleCheckbox2(v,k)" class="set-item" v-for="(v,k) in list" :key="k">
						<view>{{v.excelTitle}}</view>
						<u-radio ref="listCheckbox2"  :disabled="v.isRead!=1"  :name="v.excelId"></u-radio>
					</view>
				</u-radio-group>
			</view>
			<!--<view class="btns" @tap="goWork">确定</view>-->
			<view class="btns" :style="{'background':themeColors}" @tap="goWork" hover-class="hover-opacity">{{lang.set.confirm}}</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from "vuex";
	import evanCheckboxGroup from "../../components/evan-checkbox-group/evan-checkbox-group.vue"
	import evanCheckbox from "../../components/evan-checkbox/evan-checkbox.vue"
	import Toast from '../../common/toast.js'
	export default {
		data() {
			return {
				checked: false,
				checked1: false,
				size: 40,
				color3: null,
				index: 0,
				val:500,
				array: [100, 125, 250,500],
				list: []
			}
		},
		components: {
			evanCheckboxGroup,
			evanCheckbox
		},
		onLoad() {
			this.init()
		},
		computed: {
			...mapState(["lang","deviceId","themeColors"])
		},
		methods: {
			init() {
				uni.showLoading({
					//title: "加载中..."
					title: this.lang.set.loading
				});
				this.$u.get('authc/api/user/excel_by_user').then(res => {
					// console.log(res)
					uni.hideLoading();
					if (res.code == 0) {
						this.list = res.data
					}
				})

				// 获取波特率
				// this.$u.get('authc/api/user/find_baud').then(res => {
				// 	console.log(res)
				// 	if (res.code == 0) {
				// 		this.array = res.data
				// 		this.val = res.data[0].baud_rate
				// 	}
				// })
			},
			toggle(status) {
				console.log(status)
				this.$store.commit('setDataShow', status)
			},
			toggle1(status) {
				console.log(status)
				this.$store.commit('setStateShow', status)
			},
			toggleCheckbox2(item,index) {
				// console.log(item)
				if(item.isRead==1){
					this.color3=item.excelId;
				}else{
					//Toast.showToast(`${item.excelTitle}不能被读取`)
					Toast.showToast(`${item.excelTitle}` + this.set.dontread)
				}
				
			},
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				// this.val = this.array[this.index].baud_rate
				this.val = this.array[this.index]
				this.$store.commit('setBaud', this.val)
			},
			goWork() {
				this.$util.throttle(()=>{
					 this.$store.commit('setParamList', [this.color3]);
					this.$store.commit('setGlobalState', true);
					this.$store.commit('setChangeList', null);
					uni.switchTab({
						url: '/pages/work/work'
					})
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		background: #F1F1F1;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			width: 100%;
			padding: 80rpx 28rpx 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			font-size: 30rpx;
			font-weight: 500;
			text-align: center;
		}

		.list {
			width: 100%;
			padding: 0 28rpx;
			box-sizing: border-box;
			margin-top: 30rpx;

			.btns {
				width: 80%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 30px;
				// background: #005883;
				//background: #B7945C;
				text-align: center;
				font-size: 30rpx;
				color: #FFFFFF;
				margin: 80rpx auto;
			}

			.set-list {
				width: 100%;
				background: #FFFFFF;
				border-radius: 6px;

				.set-item {
					width: 100%;
					padding: 28rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #eee;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					color: #333;

					.set-right {
						display: flex;
						align-items: center;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-left: 28rpx;
						}
					}
				}

				.set-item:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>
